<template>
    <div v-bind="$attrs" style="border: 1px dashed #cecece;">
        <el-tag :key="tag" v-for="tag in dynamicTags" :type="disabled ? 'info' : ''" :disable-transitions="false"
            :effect="hasCheck(tag) ? 'dark' : 'plain'" @click="doClick(tag)">
            {{ tag }}
        </el-tag>
    </div>
</template>

<script>

export default {
    name: "Pszq",
    emits: ["update:modelValue"],
    props: {
        modelValue: String,
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            selected: [],
            dynamicTags: ["一", "二", "三", "四", "五", "六", "日"],
        };
    },
    created() {
        var str = this.modelValue || "";
        this.selected = str.split(",").filter((p) => p != "");
    },
    methods: {
        hasCheck(item) {
            return this.selected.indexOf(item) != -1;
        },
        doClick(item) {
            if (this.disabled) return;
            let ix = this.selected.indexOf(item);
            if (ix == -1) {
                if (item == "单" || item == "双") {
                    this.selected = [item];
                } else {
                    let dsix = this.selected.indexOf("单");
                    if (dsix != -1) {
                        this.selected.splice(dsix, 1)
                    }
                    dsix = this.selected.indexOf("双");
                    if (dsix != -1) {
                        this.selected.splice(dsix, 1)
                    }
                    this.selected.push(item);
                }
            } else {
                this.selected.splice(ix, 1);
            }
            let vals = [];
            this.dynamicTags.map(p => {
                if (this.hasCheck(p)) {
                    vals.push(p);
                }
            });
            this.$emit("update:modelValue", vals.join(","));
        },
    },

    watch: {
        modelValue: function (val) {
            var str = this.modelValue || "";
            this.selected = str.split(",").filter((p) => p != "");
        },
    },
};
</script>
<style>
.el-tag+.el-tag {
    margin-left: 4px;
}
</style>